<template>
  <a-modal
    :maskClosable="false"
    :title="title"
    :width="800"
    v-model="visible"
    centered
    :confirmLoading="confirmLoading"
    @ok="handleSubmit"
  >
    <div id="container" style="width:100%;height:400px;"></div>
    <div class="info">
      <a-select
        show-search
        v-model="value"
        placeholder="请输入地址"
        style="width: 250px"
        :default-active-first-option="false"
        :show-arrow="false"
        :filter-option="false"
        :not-found-content="null"
        @search="autoInput"
        @change="handleChange"
      >
        <a-select-option v-for="d in data" :key="d.location">
          {{ d.name }}
        </a-select-option>
      </a-select>
    </div>
  </a-modal>
</template>
<script>
import AMap from 'AMap'
export default {
  data () {
    return {
      visible: false,
      confirmLoading: false,
      title: '设置经纬度',
      map: '',
      infoWindow: '',
      geocoder: '',
      lng: '',
      lat: '',
      data: [],
      fetching: false,
      value: undefined
    }
  },
  props: {
    infoData: {
      type: Object,
      default: null
    }
  },
  mounted () {
  },
  methods: {
    show () {
      this.visible = true
      this.value = undefined
      if (this.infoData.longitude) {
        console.log('this.infoData', this.infoData)
        this.lng = this.infoData.longitude
        this.lat = this.infoData.latitude
      }
      this.$nextTick(() => {
        this.mapInit()
      })
    },
    mapInit () {
      this.map = new AMap.Map('container', {
        resizeEnable: true // 是否监控地图容器尺寸变化
      })
      this.geocoder = new AMap.Geocoder({
        radius: 1000 // 范围，默认：500
      })
      this.map.on('complete', () => {
        this.infoWindow = new AMap.InfoWindow({ offset: new AMap.Pixel(0, -35) })
        if (this.infoData.longitude) {
          this.createMarker()
        }
        this.clickOn()
      })
    },
    clickOn () {
      this.map.on('click', this.showInfoClick)
    },
    showInfoClick (e) {
      this.lng = e.lnglat.getLng()
      this.lat = e.lnglat.getLat()
      this.value = undefined
      this.createMarker()
    },

    // 展示信息
    markerClick (e) {
      this.infoWindow.setContent(e.target.content)
      this.infoWindow.open(this.map, e.target.getPosition())
    },

    // 添加图例
    createMarker () {
      var _this = this
      this.map.clearMap()
      var marker = new AMap.Marker({
        icon: 'https://webapi.amap.com/theme/v1.3/markers/n/mark_b.png',
        position: [this.lng, this.lat]
      })
      this.map.add(marker)
      this.map.setFitView()
      var lnglat = [this.lng, this.lat]
      marker.setPosition(lnglat)
      this.geocoder.getAddress(lnglat, function (status, result) {
        if (status === 'complete' && result.regeocode) {
          console.log(result.regeocode)
          _this.province = result.regeocode.addressComponent.province
          _this.city = result.regeocode.addressComponent.city
          var address = result.regeocode.formattedAddress
          marker.content = address
          marker.emit('click', { target: marker })
        } else {
          _this.$message.error('根据经纬度查询地址失败')
        }
      })
      marker.on('click', this.markerClick)
    },
    handleSubmit () {
      console.log(this.infoData)
      var params = {
        longitude: this.lng,
        latitude: this.lat
      }
      this.$emit('ok', params)
      this.visible = false
    },

    // 获取输入提示信息
    autoInput (val) {
      var _this = this
      AMap.plugin('AMap.Autocomplete', function () {
        // 实例化Autocomplete
        var autoOptions = {
          city: '全国'
        }
        var autoComplete = new AMap.Autocomplete(autoOptions)
        autoComplete.search(val, function (status, result) {
          // 搜索成功时，result即是对应的匹配数据
          console.log(result)
          _this.data = result.tips
        })
      })
    },
    handleChange (obj) {
      this.lng = obj.lng
      this.lat = obj.lat
      this.createMarker()
    }
  }
}
</script>
<style scoped>
  .info{
    position: absolute;
    top: 95px;
    left: 40px;
  }
</style>
